@use "sass:meta";
@use "variables";

:root {
    /**
    *  Generate css variables for all scss variables automatically
    */
    @each $name, $value in meta.module-variables("variables") {
        --#{$name}: #{meta.inspect($value)};
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color-scheme: light;
    font-family: $font-family-default;
}

@supports (font-variation-settings: normal) {
    *,
    body {
        font-family: $font-family-variables;
        font-feature-settings: $font-family-default-feature-settings;
    }
}

body {
    font-family: $font-family-default;
    font-size: $font-size-s;
    color: $color-menu-start;
    background: $color-gray-50;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html,
body,
#app {
    height: 100%;
    overflow: hidden;
}

.sw-drag-select-box {
    position: absolute;
    background: $color-drag-select-box;
    z-index: $z-index-drag-select-box;
}

a,
.link {
    display: inline-block;
    color: $color-shopware-brand-500;
    font-size: $font-size-xs;
    text-decoration: underline;
    cursor: pointer;
}

/* style inline external links */
a[target="_blank"]:not(.sw-external-link, .sw-internal-link, .mt-button, .mt-link--external, .mt-link--internal) {
    display: inline-block;
    position: relative;
    color: $color-shopware-brand-500;
    font-size: $font-size-xs;
    text-decoration: underline;
    cursor: pointer;
    word-break: break-word;

    &::after {
        content: "";
        display: inline-block;
        width: 0.715em;
        height: 0.715em;
        position: relative;
        margin-left: 0.285em;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23758CA3' fill-rule='evenodd' d='M12.5857864,2 L10,2 C9.44771525,2 9,1.55228475 9,1 C9,0.44771525 9.44771525,0 10,0 L15,0 C15.5522847,0 16,0.44771525 16,1 L16,6 C16,6.55228475 15.5522847,7 15,7 C14.4477153,7 14,6.55228475 14,6 L14,3.41421356 L7.20710678,10.2071068 C6.81658249,10.5976311 6.18341751,10.5976311 5.79289322,10.2071068 C5.40236893,9.81658249 5.40236893,9.18341751 5.79289322,8.79289322 L12.5857864,2 Z M6,1 C6.55228475,1 7,1.44771525 7,2 C7,2.55228475 6.55228475,3 6,3 L3,3 C2.44771525,3 2,3.44771525 2,4 L2,13 C2,13.5522847 2.44771525,14 3,14 L11.9673236,14 C12.5153749,14 12.9613171,13.5588713 12.9672647,13.0108522 L13.0000589,9.98914776 C13.0060524,9.43689554 13.4586,8.99406536 14.0108522,9.00005889 C14.5631045,9.00605241 15.0059346,9.45860001 14.9999411,10.0108522 L14.9671469,13.0325567 C14.9493042,14.6766139 13.6114776,16 11.9673236,16 L3,16 C1.34314575,16 -2.77555756e-16,14.6568542 -4.4408921e-16,13 L0,4 C-1.66533454e-16,2.34314575 1.34314575,1 3,1 L6,1 Z'/%3E%3C/svg%3E%0A");
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: 0.715em 0.715em;
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23758CA3' fill-rule='evenodd' d='M12.5857864,2 L10,2 C9.44771525,2 9,1.55228475 9,1 C9,0.44771525 9.44771525,0 10,0 L15,0 C15.5522847,0 16,0.44771525 16,1 L16,6 C16,6.55228475 15.5522847,7 15,7 C14.4477153,7 14,6.55228475 14,6 L14,3.41421356 L7.20710678,10.2071068 C6.81658249,10.5976311 6.18341751,10.5976311 5.79289322,10.2071068 C5.40236893,9.81658249 5.40236893,9.18341751 5.79289322,8.79289322 L12.5857864,2 Z M6,1 C6.55228475,1 7,1.44771525 7,2 C7,2.55228475 6.55228475,3 6,3 L3,3 C2.44771525,3 2,3.44771525 2,4 L2,13 C2,13.5522847 2.44771525,14 3,14 L11.9673236,14 C12.5153749,14 12.9613171,13.5588713 12.9672647,13.0108522 L13.0000589,9.98914776 C13.0060524,9.43689554 13.4586,8.99406536 14.0108522,9.00005889 C14.5631045,9.00605241 15.0059346,9.45860001 14.9999411,10.0108522 L14.9671469,13.0325567 C14.9493042,14.6766139 13.6114776,16 11.9673236,16 L3,16 C1.34314575,16 -2.77555756e-16,14.6568542 -4.4408921e-16,13 L0,4 C-1.66533454e-16,2.34314575 1.34314575,1 3,1 L6,1 Z'/%3E%3C/svg%3E%0A");
        mask-repeat: no-repeat;
        mask-size: 0.715em 0.715em;
        background-color: $color-shopware-brand-500;
    }
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.mt-textarea {
    margin-bottom: 24px;

    button.mt-help-text {
        margin-left: auto;
    }
}

.mt-password-field {
    margin-bottom: 32px;

    // TODO: remove when the issue is fixed https://github.com/shopware/meteor/issues/537
    &__block {
        min-height: 45px !important;
    }
}

// TODO: remove when the issue is fixed https://github.com/shopware/meteor/issues/563
.mt-url-field {
    &__protocol-toggle * {
        white-space: nowrap;
    }
}

// TODO: remove when the issue is fixed https://github.com/shopware/meteor/issues/587
.wrapper {
    & > .mt-field-label.mt-field-label {
        line-height: 16px;
        margin-bottom: 1.6px;
    }

    .dp__input {
        height: 45px;
    }
}

// TODO: remove when the bottom margin issue is fixed in checkbox field
.mt-field--checkbox__container .mt-field--checkbox.mt-field--checkbox {
    margin-bottom: 0;
}

.mt-switch.mt-switch--not-bordered {
    min-height: 0;
}

// TODO: rename selector after https://github.com/shopware/meteor/issues/603
.field-hint {
    margin-bottom: 24px;
}

.mt-card__toolbar {
    flex-basis: 100%;
    padding: 30px;
    background-color: $color-gray-100;
    border-bottom: 1px solid $color-gray-300;
}

.mt-button {
    line-height: 1;
}

.mt-inheritance-switch {
    margin-right: 8px;
}
